<template>
<!-- 分页 -->
  <div class="base-pagination">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="page.page"
      :page-size="page.limit"
      layout="prev, pager, next, jumper"
      :total="page.total"
    ></el-pagination>
  </div>
</template>

<script type="text/babel">
export default {
  name: "BasePagination",
  props: {
    page: {
      type: Object,
      required: true
    }
  },
  methods: {
    // 每页条数
    handleSizeChange(val) {
      this.page.total = val;
      this.$emit("pageChange", this.page);
      this.scrollTop();
      document.body.scrollTop = 0;
    },
    handleCurrentChange(val) {
      // 当前页
      this.page.page = val;
      this.$emit("pageChange", this.page);
      this.scrollTop();
      document.body.scrollTop = 0;
    },
    scrollTop() {
      window.scrollTo({ top: 0, behavior: "smooth" });
    }
  }
};
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
.base-pagination{
  margin-top: 15px;
  text-align:center
}
</style>
